<template>
  <div v-if="useuserStore.userInfo.userName === 'zh'" class="app-container">
    <n-card :bordered="false" :content-style="{ padding: '12px' }">
      <div class="form">
        <n-form ref="formRef" inline :label-width="80" :model="formValue">
          <n-form-item label="姓名">
            <n-input v-model:value="formValue.user.realName" placeholder="姓名" />
          </n-form-item>
          <n-form-item>
            <n-button @click="handleValidateClick">查询</n-button>
          </n-form-item>
          <n-form-item>
            <n-button @click="exportRecords">导出</n-button>
          </n-form-item>
        </n-form>
      </div>
      <div class="table">
        <NDataTable
          :columns="columns"
          :data="tableData"
          :single-line="false"
          :pagination="pagination"
        ></NDataTable>
      </div>
    </n-card>
  </div>
  <span v-else class="h-[200px] w-full flex justify-center mt-20 text-2xl font-bold"
    >非管理员，无权查看</span
  >
</template>

<script setup lang="ts">
  import { defineComponent, onMounted, ref, reactive } from 'vue'
  import { NCard, NForm, NFormItem, NInput, NDataTable } from 'naive-ui'
  import userStore from '../../store/userStore/index'
  import store from '../../store/dailyStore/index'
  import { dataTableProps } from 'naive-ui/lib/data-table'
  import type { DataTableProps } from 'naive-ui/lib/data-table'
  const useuserStore = userStore()
  const dailyTestStore = store()
  const tableData = ref()

  const formRef: any = ref(null)
  const formValue = ref({
    user: {
      realName: ''
    }
  })

  const pagination = reactive({
    page: 1,
    pageCount: 1,
    itemCount: 0,
    pageSize: 15,
    pageSizes: [15, 50, 100],
    showSizePicker: true,
    prefix: () => {
      return `共 ${pagination.itemCount} 条数据`
    },
    onChange: (page: number) => {
      pagination.page = page
      handleValidateClick()
    },
    onUpdatePageSize: (pageSize: number) => {
      pagination.pageSize = pageSize
      pagination.page = 1
      handleValidateClick()
    }
  })

  const handleValidateClick = () => {
    dailyTestStore.getRecords(formValue.value.user.realName).then(({ data }) => {
      tableData.value = data
      pagination.itemCount = data.length
    })
  }

  const exportRecords = () => {
    dailyTestStore.exportRecords(formValue.value.user.realName)
  }

  const columns: DataTableProps['columns'] = [
    { key: 'topic', title: '题目', align: 'center' },
    { key: 'examDate', title: '答题时间', align: 'center' },
    { key: 'examUser', title: '答题人', align: 'center' },
    {
      key: 'isTrue',
      title: '是否正确',
      align: 'center',
      render: (data: any) => {
        return data.isTrue === 1 ? '错误' : '正确'
      }
    }
  ]
</script>
<style scoped></style>
